<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Drive</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
        crossorigin=""></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <style>
        button {
            position: absolute;
            margin: 20px;
        }
        
        #pause::after {
            content: 'Pause';
        }
        
        #pause.pause::after {
            content: 'Play';
        }
        
        .marker {
            background-image: url('car.svg');
            background-size: cover;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button id='pause'></button>
    <div id='map'></div>
    <script>
        var mymap = L.map('map').setView([39.9,116.3], 1);
        var osm = L.tileLayer('/osm/{z}/{x}/{y}.png?origin=nw', {
            attribution: 'Aluskaart &copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
        }).addTo(mymap);
    </script>

</body>

</html>